<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>设备列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
		<link rel="stylesheet" type="text/css" href="css/comment.css" />
		<link rel="stylesheet" type="text/css" href="css/eqParameter.css" />
		<link rel="stylesheet" type="text/css" href="css/dataHistory.css" />
	</head>

	<body>
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-slide-in">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-right">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						<div class="canvasBox">
							<div>设备名称</div>
							<div class="canvasTime">
								<input class="timeText" type="text" id="devname" value="" placeholder="" />
							</div>
							<div>在线状态</div>
							<div class="canvasTime">
								<select id="s1">
									<option value="0" selected>全部</option>
									<option value="1">在线</option>
									<option value="2">离线</option>
								</select>
							</div>
							<div class="" style="text-align: center;">
								<button type="button" class="mui-btn mui-btn-primary submieWarn">确定</button>
								<button type="button" class="mui-btn mui-btn-warning canvasWarn">取消</button>
							</div>
						</div>
					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav gradient_normal">
					<div style="height: 20px;"></div>
					<div class="mui-action-back mui-pull-left mui-icon mui-icon-arrowleft"></div>
					<h1 class="mui-title">设备列表</h1>
					<div class="mui-pull-right mui-icon mui-icon-search searchBtn"></div>
				</header>
				<div class="mui-content mui-scroll-wrapper" style="padding-top: 64px;">
					<div class="mui-scroll" style="bottom: 0;top: 64px;">
						<!-- 主界面具体展示内容 -->
						<div class="eqbox" style="padding: 0.2rem 0.3rem;height: 100%;overflow-y: auto;">
							
						</div>
					</div>
				</div>
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script src="js/mui.picker.js" type="text/javascript"></script>
		<script src="js/mui.poppicker.js" type="text/javascript"></script>
		<script src="js/jquery.js"></script>
		<script src="js/rem.js"></script>
		<script type="text/javascript">
			var _url = "http://112.54.80.235:8038";
			mui.init();
			mui.plusReady(function() {
				// //关闭等待框
				plus.nativeUI.closeWaiting();
				//数据绑定
				getData(0);
				//点击列表
				$(document).on("tap", ".eqp_href", function() {
					var id = $(this).attr("data-id");
					mui.openWindow({
						url: "dataHistory.html",
						id: "dataHistory.html",
						extras: {
							proid: id
						},
						waiting: {
							autoShow: true, //自动显示等待框，默认为true
							title: '正在加载...', //等待对话框上显示的提示内容
						}
					})
				});
				//检索--设备类型选择
				$('.canvas_type').on("tap",".item",function(){
					$(this).addClass("active").siblings().removeClass("active");
				});
				//检索--安装位置
				$('.canvas_place').on("tap",".item",function(){
					$(this).addClass("active").siblings().removeClass("active");
				});
				//打开搜索
				$('.searchBtn').click(function() {
					mui('.mui-off-canvas-wrap').offCanvas('show');
				});
				
				//日期
				var picker = new mui.PopPicker();
				picker.setData([{
					value: 'zz',
					text: '智子'
				}]);
				$('.canvasTime_start').click(function() {
					picker.show(function(selectItems) {
						console.log(selectItems[0].text); //智子
						console.log(selectItems[0].value); //zz 
					})
				});
				//搜索--点击确定，submieWarn
				$('.submieWarn').click(function() {
					//获取选中的信息
					var devname = $('#devname').val();
					var select = document.getElementById("s1");
					var s1 = select.value;
					getserdevice(devname,s1);
					mui('.mui-off-canvas-wrap').offCanvas().close();
				});
				//搜索--点击取消，关闭搜索submieWarn
				$('.canvasWarn').click(function() {
					mui('.mui-off-canvas-wrap').offCanvas().close();
				});
				//点击具体设备
				$('.eqbox').on('tap', '.eqP_item', function() {
					var eqId = $(this).attr("data-id");
					var eqName = $(this).attr("data-name");
					localStorage.setItem("eqno",eqId);
					mui.back();
					var main = plus.webview.getWebviewById('equipment.html');
					mui.fire(main, 'eqId', {
						id: eqId,
						name:eqName
					});
				})
			});
			//获取设备信息
			function getData(DevNo){
				$.ajax({
					type: 'get',
					url: _url + '/actionapi/Users/SJGetSheBei',
					dataType: 'json',
					data: {
						DevNo: DevNo
					},
					success: function(data) {
						console.log(JSON.stringify(data.data));
						var data = data.data;
						var html = '';
						for (var i = 0; i < data.length; i++) {
							html += '<div class="eqP_item" data-id="'+data[i].DeviceNO+'" data-name="'+data[i].DeviceName+'">';
							html += '<div class="title">'+data[i].DeviceName+'<span class="eqp_href mui-pull-right mui-icon mui-icon-arrowright"></span></div>';
							html += '<div class="content"><div class="rol clearfix">';
							html += '<span class="fl">型号规格：</span><span class="fr">'+data[i].DeviceNO+'</span>';
							html += '</div><div class="rol clearfix">';
							html += '<span class="fl">使用部门：</span><span class="fr">'+data[i].UseDept+'</span>';
							html += '</div><div class="rol clearfix">';
							html += '<span class="fl">安装地点：</span><span class="fr">'+data[i].InstallAddress+'</span>';
							html += '</div></div></div>';
						}
						$('.eqbox').html(html);
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						plus.nativeUI.alert("SJGetSheBei接口有误", function(e){
								console.log(e.index);
							}, "信息提示", '确定');
					}
				})
			}
			//搜索设备信息
			function getserdevice(devname,s1){
				$.ajax({
					type: 'get',
					url: _url + '/actionapi/Users/SJGetSerDevice',
					dataType: 'json',
					data: {
						devname:devname,
						s1:s1
					},
					success: function(data) {	
						var datas = data.data;
						console.log(data.Code);
						if(data.Code!=0){
						var html = '';
						for (var i = 0; i < datas.length; i++) {
							html += '<div class="eqP_item" data-id="'+datas[i].DeviceNO+'" data-name="'+datas[i].DeviceName+'">';
							html += '<div class="title">'+datas[i].DeviceName+'<span class="eqp_href mui-pull-right mui-icon mui-icon-arrowright"></span></div>';
							html += '<div class="content"><div class="rol clearfix">';
							html += '<span class="fl">型号规格：</span><span class="fr">'+datas[i].DeviceNO+'</span>';
							html += '</div><div class="rol clearfix">';
							html += '<span class="fl">使用部门：</span><span class="fr">'+datas[i].UseDept+'</span>';
							html += '</div><div class="rol clearfix">';
							html += '<span class="fl">安装地点：</span><span class="fr">'+datas[i].InstallAddress+'</span>';
							html += '</div></div></div>';
						}
						$('.eqbox').html(html);
						}else {
							html = '<div class="noData">暂无实时数据</div>';
							$('.eqbox').html(html);
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						plus.nativeUI.alert("SJGetSheBei接口有误", function(e){
								console.log(e.index);
							}, "信息提示", '确定');
					}
				})	
			}
		</script>
	</body>

</html>
